<!DOCTYPE HTML>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0, minimum-scale=1.0, user-scalable=0, initial-scale=1.0, width=device-width" />
    <meta name="format-detection" content="telephone=no, email=no, date=no, address=no">
    <title>首页main</title>
    <link rel="stylesheet" type="text/css" href="../css/api.css" />
    <link rel="stylesheet" type="text/css" href="../css/style.css" />
    <style>
        body {
            background: #f6f6f6;
        }

        .list {
            background: #fff;
            margin: 0.5rem;
            border: 1px solid #F6F6F6;
            border-radius: 0.25rem;
            box-shadow: 0 0 0.5rem 0 rgba(0, 0, 0, 0.05);
        }

        .img_box {
            width: 5rem;
        }

        .img_box img {
            width: 100%;
            border-radius: 0.4rem;
        }

        .main_content {
            width: 0;
            overflow: hidden;
            padding-left: 0.5rem;
        }

        .main_content .title {
            font-size: 0.8rem;
            font-weight: bold;
            color: #333;
        }

        .main_content .author {
            font-size: 0.6rem;
            color: #767676;
        }

        .main_content .label {
            font-size: 0.6rem;
            color: #F58623;
        }

        .right_label {
            font-size: 0.6rem;
            color: #767676;
            border: 1px solid #BBBBBB;
            border-radius: 1rem;
            padding: 0.2rem 0.4rem;
        }
    </style>
</head>

<body>
    <div id="app" class="wrap">
        <template v-for="(item,index) in data">


        <div @click="openZhibo(index)" class="list">
            <div class="flex hj_padded_7d5">
                <div class="img_box flex flex_center">
                    <img :src="item.titlepic" alt="{{item.title}}">
                </div>
                <div class="main_content flex_1 flex_column flex_between hj_margin_l_2d5">
                    <div class="top_content">
                        <div class="title hj_ellipsis_1">
                            {{item.title}}
                        </div>
                        <div class="author hj_margin_t_2d5">
                            {{item.author}}
                        </div>
                    </div>
                    <div>
                        <div class="label">
                            {{ item.price | is_vip }}
                        </div>
                    </div>
                </div>
                <div class="flex flex_center">
                    <template v-if="item.is_live == 3">
                      <div class="right_label">直播中</div>
                    </template>
    </div>
    </div>
    </div>

    </template>
    </div>
</body>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript" src="../script/util.js"></script>
<script type="text/javascript" src="../script/vue.min.js"></script>
<script type="text/javascript">
    var app = '';
    var zhibo;
    apiready = function() {
        api.execScript({
            name: 'root',
            script: "$api.html($api.dom('header'),'" + text + "');"
        });
        zhibo = api.require("liveplayermodule");
        app = new Vue({
            el: '#app',
            data: {
                data: ''
            },
            filters: {
                is_vip: function(value) {
                    if (value > 0) {
                        return "付费"
                    } else {
                        return "免费"
                    }
                }
            }
        });
        getTodayLive();
        api.setRefreshHeaderInfo({
            loadingImg: 'widget://image/refresh.png',
            bgColor: '#ccc',
            textColor: '#fff',
            textDown: '下拉刷新...',
            textUp: '松开刷新...'
        }, function(ret, err) {
            //在这里从服务器加载数据，加载完成后调用api.refreshHeaderLoadDone()方法恢复组件到默认状态
            getTodayLive(1);
        });
    };

    function getTodayLive(type) {
        //alert(text);
        console.log(host);
        console.log(from);
        console.log(major_type);
        api.ajax({
            url: host + '/api.php?c=Course&a=getList',
            method: 'post',
            data: {
                values: {
                    token: token,
                    app: from,
                    major_type: major_type
                }
            }
        }, function(ret, err) {
            if (ret) {


                if (ret.code == 200) {
                    if (type == 1) {
                        api.refreshHeaderLoadDone();
                    }
                    app.data = ret.result.list;
                }

            } else {
                alert(JSON.stringify(err));
            }
        });

    }

    function openZhibo(index) {
        console.log(index);

        if (token == '-1') {
            api.openWin({
                name: 'login',
                reload: true,
                url: './login.html',
            });
        } else {
            var is_live = app.data[index].is_live;
            var id = app.data[index].id;
            var item = id;
            if(is_live == 3){
              checkAuth(1, id, item, index);
            }
            else{
              var param = {
                  token: token,
                  app: from,
                  major_type: major_type,
                  course_id: app.data[index].id,
                  new: app.data[index].new,
                  is_live: app.data[index].is_live,
                  item_title: app.data[index].title,
                  urlTitle: host,
                  username: username
              }
              zhibo.enterRoom(param);
            }
        }
    }

    function checkAuth(type, id, item, index) {

        api.ajax({
            url: host + '/api.php?c=Ucenter&a=checkPrivilegeIsFree',
            method: 'post',
            data: {
                values: {
                    token: token,
                    type: type,
                    id: id,
                    item: item,
                    app: from,
                    major_type: major_type
                }
            }
        }, function(ret, err) {
            if (ret) {
                console.log(JSON.stringify(ret));
                if (ret.code == 200) {
                    var param = {
                        token: token,
                        app: from,
                        major_type: major_type,
                        course_id: app.data[index].id,
                        new: app.data[index].new,
                        is_live: app.data[index].is_live,
                        item_title: app.data[index].title,
                        urlTitle: host,
                        username: username
                    }
                    console.log(JSON.stringify(param));
                    zhibo.enterRoom(param);
                } else {
                  console.log(JSON.stringify(ret))
                    api.toast({
                        msg: ret.msg,
                        duration: 2000,
                        location: 'bottom'
                    });
                }
            } else {
                alert(JSON.stringify(err));
            }
        });

    }
</script>

</html>
